{{ 'twy-agox-launch-video.css' | asset_url | stylesheet_tag }}
<div class="twy-agox-launch-video spaced-section {% unless section.settings.full_width %} page-width{% endunless %}">
  <div class="twy-timer-container page-width">
    <div class="twy-timer-container__title">
      {{ section.settings.desc }}
    </div>
    <div class="twy-timer-container__clock">
      <span id="day-count" class="timer-number">00</span>
      <span>{{ section.settings.day_text }}</span>
      <span id="hour-count" class="timer-number">00</span>
      <span>{{ section.settings.hour_text }}</span>
      <span id="min-count" class="timer-number">00</span>
      <span>{{ section.settings.min_text }}</span>
      <span id="second-count" class="timer-number">00</span>
    </div>
  </div>
 <div class="Teaser-padding">
  <div class="page-width">
    {% if section.settings.video != blank %}
      {{ section.settings.video }}
    {% endif %}
  </div>
 </div>
</div>
 
<script>
  let endDate = "";
  {% if section.settings.end_date != blank %}
    endDate = '{{ section.settings.end_date }}';
  {% else %}
    endDate =  '2023/12/30 00:00:00';
  {% endif %}
  
  const endTime = new Date(endDate).getTime();
  let nowTime = new Date().getTime();
  
  let extraTime = {
    day: 0,
    hour: 0,
    min: 0,
    second: 0
  }
  
  const dayCount = 86400000;
  const hourCount = 3600000;
  const minCount = 60000;
  const secondCount = 1000;
  
  function render (time) {
    $('#day-count').text(time.day);
    $('#hour-count').text(time.hour);
    $('#min-count').text(time.min);
    $('#second-count').text(time.second);
  }
  
  // 计时器
  const tiktok = () => {
    setTimeout(() => {
      nowTime = nowTime + 1000;
      const duration = endTime - nowTime;
      
      if (duration > 0) {
        const dayDuration = parseInt(duration / dayCount, 10);
        const hourDuration = parseInt((duration % dayCount) / hourCount, 10);
        const minDuration = parseInt((duration - dayCount * dayDuration - hourDuration * hourCount) / minCount, 10);
        const secondDuration = parseInt((duration - dayCount * dayDuration - hourDuration * hourCount - minDuration * minCount) / secondCount, 10);
        
        extraTime = {
          day: dayDuration < 10 ? `0${dayDuration}` : dayDuration,
          hour: hourDuration < 10 ? `0${hourDuration}` : hourDuration,
          min: minDuration < 10 ? `0${minDuration}` : minDuration,
          second: secondDuration < 10 ? `0${secondDuration}` : secondDuration
        }
        render(extraTime);
        tiktok();
      } else {
        console.log(`game over`);
      }
    }, 1000);
  }
  
  tiktok();
</script>
<script>
  let now = '';
</script>

{% schema %}
{
  "name": "Twy Agox Launch video",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width twy-agox-launch-video",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Video",
      "label": "t:sections.video.settings.heading.label"
    },
    {
      "type": "html",
      "id": "video",
      "label": "Video"
    },
    {
      "type": "image_picker",
      "id": "poster",
      "label": "Video Poster"
    },
    {
    "type": "checkbox",
    "id": "full_width",
    "label": "t:sections.video.settings.full_width.label",
    "default": false
    },
    {
      "type": "text",
      "id": "end_date",
      "default": "2023/12/30 00:00:00",
      "label": "End Date"
    },
    {
      "type": "text",
      "id": "desc",
      "default": "Coming Soon",
      "label": "Start Desc"
    },
    {
      "type": "text",
      "id": "day_text",
      "default": "DAYS",
      "label": "Day Text"
    },
    {
      "type": "text",
      "id": "hour_text",
      "default": "HRS",
      "label": "Hour Text"
    },
    {
      "type": "text",
      "id": "min_text",
      "default": "MINS",
      "label": "Min Text"
    }
  ],
  "presets": [
    {
      "name": "Twy Agox Launch video"
    }
  ]
}
{% endschema %}
